<template>
	<div style="overflow: hidden;width: 100%;height: 100vh;">
		<el-container id="background">
			<div id="bg-block"></div>
			<el-card>
				<el-tabs v-model="activeName" type="card" lazy>
				    <el-tab-pane label="登入" name="login">
						<!-- 登入 -->
						<el-form class="login-form" v-model="loginFormData" :rules="formRules.loginFormRule">
							<el-form-item label="用户名" prop="username">
								<el-input class="inputarea" v-model="loginFormData.username" type="text"></el-input>
							</el-form-item>
							<el-form-item label="密码" prop="password">
								<el-input class="inputarea" v-model="loginFormData.password" type="password"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button id="loginBtn" @click="login">登入</el-button>
							</el-form-item>
						</el-form>
					</el-tab-pane>
				    <el-tab-pane label="注册" name="register">
						<!-- 注册 -->
						<el-form class="register-form">
							<el-form-item label="用户名">
								<el-input class="inputarea" v-model="registerForm.username" type="text"></el-input>
							</el-form-item>
							<el-form-item label="密码">
								<el-input class="inputarea" v-model="registerForm.password" type="password"></el-input>
							</el-form-item>
							<el-form-item label="确认密码">
								<el-input class="inputarea" v-model="registerForm.reCheckPassword" type="password"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button id="registerBtn" @click="register">注册</el-button>
							</el-form-item>
						</el-form>
					</el-tab-pane>
				</el-tabs>
				<h1 id="logo">SHOU<span>SI</span></h1>
			</el-card>
		</el-container>
	</div>
</template>

<script>
import httpUtils from '../../utils/httpUtils.js'
export default{
	name:"Login",
	data(){
		return {
			activeName: "login",
			loginFormData: {
				username: "",
				password: ""
			},
			// 表单验证
			formRules:{
				loginFormRule:{
					username: [
						{ required: true, message: '用户名不能为空'},
					],
					password: [
						{ required: true, message: '密码不能为空'},
					]
				}
			},
			registerForm: {
				username: "",
				password: "",
				reCheckPassword: ""
			},
			bgImgs: [{
				src: "../../static/defaultBgImg.png",
				colors: "#c7c7c7"
			},{
				src: "../../static/wallhaven-rd3xvm.jpg",
				colors: "#abbcda"
			},{
				src: "../../static/wallhaven-9mxz8k.jpg",
				colors: "#424153"
			},{
				src: "../../static/wallhaven-rdq3v1.jpg",
				colors: "#999999"
			},{
				src: "../../static/wallhaven-3zleed.jpg",
				colors: "#424153"
			}
			]
		}
	},
	methods:{
		// 修改背景图片及颜色
		changeBackground(){
			// 随机数生成 随机背景图
			let randomIndex = Math.floor(Math.random()*(this.bgImgs.length));
			
			let elContainer = document.querySelector("#background");
			elContainer.style.backgroundImage = "url("+this.bgImgs[randomIndex].src+")";
			elContainer.style.backgroundSize = "cover";
			let elTab = document.querySelector(".el-card");
			elTab.style.backgroundColor = this.bgImgs[randomIndex].colors.split(',')[0];
			// 增加透明度的颜色
			let colors = elTab.style.backgroundColor.match(/\d+/g);
			let opacityColor = "rgba("+colors[0]+","+colors[1]+","+colors[2]+", 0.8)";
			elTab.style.backgroundColor = opacityColor;
		},
		// 登入
		login(){
			// 防抖
			httpUtils.debounce(this.realLogin(), 500);
		},
		realLogin(){
			this.$axios.get('/api/users/login', {
				params:{
					userName: this.loginFormData.username,
					password: this.loginFormData.password
				}
			}).then(
				(res)=>{
					// console.log(res);
					if(res.state = '200'){
						this.imgs = res.data;
						if(res.data.code==='301'){
							this.$message(`w(ﾟДﾟ)w登入失败了！服务器拍着你的脑瓜子说：${res.data.msg}`);
						}else{
							this.$router.push({path:"/random"});
							this.$message('登入成功(๑•̀ㅂ•́)و✧~~');
						}
					}
				}
			).catch(
				(err)=>{
					console.log(err);
				}
			)
		},
		// 注册
		register(){
			
		},
		// 请求背景图片
		getBgImg(){
			this.$axios.get('/api/images/randomBackground').then(
				(res)=>{
					if(res.state = '200'){
						this.bgImg = res.data[0];
						console.log(res.data);
					}
				}
			).catch(
				(err)=>{
					console.log(err);
				}
			)
		}
	},
	mounted() {
		// this.getBgImg();
		this.changeBackground();
	}
}
</script>

<style scoped>
@keyframes cardAnimation{
	from{
		transform: translateY(-50%) rotateZ(10deg);
	}
	50%{
		transform: translateY(0);
	}
	75%{
		transform: translateY(-15%) ;
	}
	90%{
		transform: translateY(-5%);
	}
	to{
		transform: translateY(0);
	}
}
@keyframes kenburns-top {
	0% {
		transform: scale(1) translateY(0);
		transform-origin: 50% 16%;
	}
	100% {
		transform: scale(1.1) translateY(-15px);
		transform-origin: top;
	}
}
/* logo动画 */
@keyframes logo-animation{
	0%{
		letter-spacing: -0.6rem;
		opacity: 0;
	}
	50%{
		opacity: 0.6;
	}
	100%{
		opacity: 1;
	}
}
.el-container{
	height: 100%;
	width: 100%;
	/* 布局 */
	display: flex;
	justify-content: center;
	align-items: center;
	/* 定位 */
	position: relative;
	animation: kenburns-top 2s ease-out both;
}
.el-card{
	width: 35%;
	height: 55vh;
	border-radius: 2%;
	border: none !important;
	position: absolute;
	animation: cardAnimation 1s ease-in 0s;
	box-shadow: 1px 1x 10px 1px black;
}
/* 用作card的背景模糊 */
#bg-block{
	width: 35%;
	height: 55vh;
	border-radius: 2%;
	background-color: white;
	filter: blur(5px);
	opacity: 0.2;
	border: 1px solid;
	animation: cardAnimation 1s ease-in 0s;
	position: absolute;
}
.el-tabs{
	/* width: 100%;
	height: 100vh; */
}
.el-tab-pane{
	height: 40vh;
	/* 布局 */
	display: flex;
	justify-content: center;
	align-items: center;
}
.login-form{
	width: 40%;
}
.login-form .el-input{
	width: 100%
}
.register-form{
	display: none;
	width: 40%;
}
.register-form .el-input{
	width: 100%
}
#logo{
	font-family: "book antiqua";
	font-size: 2rem;
	cursor:pointer;
	position: absolute;
	right: 5%;
	top: 3%;
	animation: logo-animation 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0s;
}
#logo > span{
	font-family:'Times New Roman', Times, serif;
	color: #ffffff;
}
.el-button{
	width: 100%;
}
/* 修改elementui默认样式 */
.inputarea>>>.el-input__inner{
	border: 0 none;
	opacity: 0.5;
} 
.el-form-item__label {
	text-align: justify;
	height: 50px;
}
/* 媒体查询 */
@media screen and (max-width:480px){
	.el-card{
		width: 90%;
	}
}
</style>
